<template>
  <div p-5>
    <DynamicTable
      :data-request="loadTableData"
      :columns="columns"
      bordered
      :scroll="{
        y: 'calc(100vh - 330px)',
      }"
    >
    </DynamicTable>
    <DraggableModal
      v-model:open="open"
      title="详情"
      :footer="false"
      :keyboard="false"
      @cancel="onOk"
    >
      <a-descriptions :labelStyle="{ width: '120px' }" bordered>
        <a-descriptions-item :label="chapterList[0]" :span="3" v-if="chapterList?.length == 3">{{
          chapterList[1] + chapterList[2]
        }}</a-descriptions-item>
        <a-descriptions-item :label="chapterList[0]" :span="3" v-if="chapterList?.length == 2">{{
          chapterList[1]
        }}</a-descriptions-item>
        <a-descriptions-item :label="termName" :span="3">{{ termConst }}</a-descriptions-item>
      </a-descriptions>
    </DraggableModal>
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { useTable } from '@/components/core/dynamic-table';
  import { baseColumns, type TableListItem, type TableColumnItem } from './columns';
  import { DraggableModal } from '@/components/core/draggable-modal';
  import { getLawPageList, getLawDetail } from '@/api/laws';

  defineOptions({
    name: 'strative',
  });

  const [DynamicTable, dynamicTableInstance] = useTable();

  /**
   * 表格数据
   */

  const loadTableData = async (params): Promise<API.TableListResult> => {
    const data = await getLawPageList(params);
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  /**
   * @description 详情页面
   */

  const detailData = ref();
  const chapterList = ref([]);
  const termName = ref('');
  const termConst = ref('');
  const open = ref<boolean>(false);

  const openDetail = async (record: TableListItem) => {
    detailData.value = record;
    chapterList.value = detailData.value.chapter.trim().split(/\s+/);
    termName.value = detailData.value.term.trim().split(/\s+/)[0];
    termConst.value = detailData.value.term.replace(/^.*?\s/, '');
    open.value = true;
  };

  const onOk = () => {
    open.value = false;
  };

  const columns: TableColumnItem[] = [
    ...baseColumns,
    {
      title: '操作',
      width: 20,
      dataIndex: 'ACTION',
      align: 'center',
      actions: ({ record }) => [
        {
          label: '详情',
          onClick: () => openDetail(record),
        },
      ],
    },
  ];
</script>
<style scoped lang="less"></style>
